<template>
  <el-form label-position="left" ref="form" :model="form" label-width="100px">
    <el-row
      :gutter="30"
      style="border-bottom: 1px solid #ccc; margin-bottom: 20px"
    >
      <el-col :span="12">
        <el-form-item label="户号">
          <el-input :disabled="isPreview" v-model="form.customerNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业名称">
          <el-input :disabled="isPreview" v-model="form.companyName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="税号">
          <el-input
            :disabled="isPreview"
            v-model="form.enterpriseCode"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="星级">
          <el-select :disabled="isPreview" v-model="form.userstarRating">
            <el-option
              v-for="item in starList"
              :key="item.text"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="行业类别">
          <el-select :disabled="isPreview" v-model="form.industryCategoryName">
            <el-option
              v-for="item in HYLB"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="行业分类">
          <el-select :disabled="isPreview" v-model="form.industryTypeName">
            <el-option
              v-for="item in HYFL"
              :key="item.text"
              :value="item.text"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="营业范围">
          <el-input
            type="textarea"
            :disabled="isPreview"
            resize="none"
            :rows="3"
            v-model="form.businessScopeDetail"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row
      :gutter="30"
      style="border-bottom: 1px solid #ccc; margin-bottom: 20px"
    >
      <el-col :span="12">
        <el-form-item label="省" prop="provinceName">
          <el-select
            :disabled="isPreview"
            v-model="form.provinceName"
            placeholder="请选择省份"
          >
            <el-option
              v-for="item in province"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="市" prop="cityName">
          <el-select
            :disabled="isPreview"
            v-model="form.cityName"
            placeholder="请选择城市"
          >
            <el-option
              v-for="item in city"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="县" prop="areaName">
          <el-select
            :disabled="isPreview"
            v-model="form.areaName"
            placeholder="请选择县"
          >
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="联系人">
          <el-input :disabled="isPreview" v-model="form.contacts"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系手机">
          <el-input
            :disabled="isPreview"
            v-model="form.contactsMobile"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用电地址">
          <el-input :disabled="isPreview" v-model="form.address"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同容量">
          <el-input
            :disabled="isPreview"
            v-model="form.contractCapacity"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="运行容量">
          <el-input :disabled="isPreview" v-model="form.runCapacity"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户日期">
          <!-- <el-input v-model="form.createDate" placeholder=""></el-input> -->
          <el-date-picker
            v-model="form.createDate"
            type="date"
            :disabled="isPreview"
            placeholder="选择开户日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row style="text-align: center">
      <el-col>
        <el-button
          v-loading="loading"
          class="dialogBtn"
          type="primary"
          @click="next"
          v-if="!isPreview"
          >下一步</el-button
        >
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {
  getDictionaryApi,
  getshengshiquApi,
  saveCustomerFile3Api
} from '@/api/customerFile'
import dayjs from 'dayjs'
export default {
  name: 'CompanyInfo',
  props: ['id', 'isEdit', 'companyData', 'isPreview'],
  data () {
    return {
      form: {},
      province: [],
      city: [],
      area: [],
      HYFL: [],
      starList: [
        { value: '1', label: '一星用户' },
        { value: '2', label: '二星用户' },
        { value: '3', label: '三星用户' },
        { value: '4', label: '四星用户' },
        { value: '5', label: '五星用户' }
      ],
      HYLB: [
        { id: 'A000', value: '一、农、林、牧、渔业' },
        { id: 'GG00', value: '二、工业' },
        { id: 'E000', value: '三、建筑业' },
        { id: 'F000', value: '四、交通运输、仓储和邮政业' },
        { id: 'G000', value: '五、信息传输、计算机服务和软件业' },
        { id: 'H000', value: '六、商业、住宿和餐饮业' },
        { id: 'J000', value: '七、金融、房地产、商务及居民服务业' },
        { id: 'M000', value: '八、公共事业及管理组织' }
      ],
      loading: false
    }
  },
  async created () {
    this.$watch('form.industryCategoryName', async (newVal, oldVal) => {
      this.$set(this.form, 'industryTypeName', '')
      this.form.industryCategory = this.HYLB.find(
        (item) => item.value === this.form.industryCategoryName
      )?.id
      const res = await getDictionaryApi(
        'GWYXDM_HYFL',
        this.form.industryCategory
      )
      this.HYFL = res.data.list
      this.HYFL.shift()
      // console.log(this.form)
      // console.log(res.data.list)
    })
    this.$watch('form.industryTypeName', async (newVal, oldVal) => {
      this.form.industryType = this.HYFL.find(
        (item) => item.text === newVal
      )?.value
    })
    this.$watch('form.provinceName', async (newVal) => {
      this.$set(this.form, 'cityName', '')
      this.form.province = await this.province.find(
        (item) => item.text === newVal
      )?.value
      const shi = await getshengshiquApi(this.form.province)
      this.city = shi.data.list
      // console.log(this.city)
    })
    this.$watch('form.cityName', async (newVal) => {
      this.$set(this.form, 'areaName', '')
      this.form.city = this.city.find((item) => item.text === newVal)?.value
      const qu = await getshengshiquApi(this.form.city)
      // console.log(qu)
      this.area = qu.data.list
      if (this.isEdit) {
        const qu = await getshengshiquApi(this.form.city)
        // console.log(qu)
        this.area = qu.data.list
      }
    })
    this.$watch('form.areaName', async (newVal) => {
      this.form.area = this.area.find((item) => item.text === newVal)?.value
      // console.log(this.form)
    })
    this.$watch('form.createDate', async (newVal) => {
      this.form.createDate = dayjs(newVal).format('YYYY-MM-DD')
    })
    await this.getProvince()
    if (this.isPreview) {
      await this.getInfoData()
    } else {
      await this.setForm()
    }
  },

  methods: {

    // 预览回显
    async getInfoData () {
      const data = this.companyData
      console.log(data)
      this.form = {
        customerNo: data.customerNo,
        companyName: data.companyName,
        enterpriseCode: data.enterpriseCode,
        businessScopeDetail: data.businessScopeDetail,
        contacts: data.contacts,
        contactsMobile: data.contactsMobile,
        address: data.address,
        contractCapacity: data.contractCapacity,
        createDate: data.createDate,
        userstarRating: data.userstarRating,
        runCapacity: data.runCapacity
      }
      await this.$set(this.form, 'provinceName', data.provinceName)
      await this.$set(this.form, 'province', data.province)
      await this.$set(this.form, 'cityName', data.cityName)
      await this.$set(this.form, 'city', data.city)
      await this.$set(this.form, 'areaName', data.areaName)
      await this.$set(this.form, 'area', data.area)
      await this.$set(
        this.form,
        'industryCategoryName',
        data.industryCategoryName
      )
      await this.$set(this.form, 'industryTypeName', data.industryTypeName)
    },
    isValidPhoneNumber (phoneNumber) {
      const mobilePattern = /^[1]([3-9])[0-9]{9}$/ // 手机号正则表达式
      const telPattern = /^0\d{2,3}-\d{7,8}$/ // 座机号正则表达式
      if (mobilePattern.test(phoneNumber) || telPattern.test(phoneNumber)) {
        return true
      } else {
        return false
      }
    },
    async setForm () {
      const data = this.companyData
      let contactsMobile = ''
      if (data?.contacts?.phoneNumber) {
        for (let i = 0; i < data.contacts.phoneNumber.length; i++) {
          const phoneNumber = data.contacts.phoneNumber[i].value
          if (this.isValidPhoneNumber(phoneNumber)) {
            contactsMobile = phoneNumber
            break
          }
        }
      }
      this.form = {
        // customerNo: data.companyCode,
        companyName: data.companyName,
        enterpriseCode: data.creditNo,
        industryTypeName: data.industry,
        businessScopeDetail: data.businessScope,
        contacts: data.legalPerson,
        contactsMobile: contactsMobile,
        address: data.companyAddress,
        createDate: dayjs().format('YYYY-MM-DD')
      }
      await this.$set(this.form, 'provinceName', data.province)
      setTimeout(() => {
        this.$set(this.form, 'cityName', data.city)
      }, 500)
      setTimeout(() => {
        this.$set(this.form, 'areaName', data.district)
      }, 800)
      // const provinceValue = this.province.find(item => item.text == data.province).value
      // console.log(provinceValue)
      // console.log(data.city)
      // await this.$set(this.form, 'province', provinceValue)
      // await this.$set(this.form, 'provinceName', data.province)
      // const cityValue = await this.city.find(item => item.text === data.city).value
      // console.log(cityValue)
      // await this.$set(this.form, 'city', cityValue)
      // await this.$set(this.form, 'cityName', data.city)
      // const areaValue = await this.area.find(item => item.text === data.city).value
      // await this.$set(this.form, 'area', areaValue)
      // await this.$set(this.form, 'areaName', data.district)
    },
    async getProvince () {
      const res = await getshengshiquApi('0')
      this.province = res.data.list
      // console.log(this.province)
    },
    // sheng (sheng, shi, qu) {
    //   this.$nextTick(async () => {
    //     await this.$set(this.form, 'provinceName', sheng)
    //     await this.$set(this.form, 'cityName', shi)
    //     await this.$set(this.form, 'areaName', qu)
    //   })
    // },
    async next () {
      // console.log(this.form)
      // console.log(this.id)
      this.loading = true
      try {
        const res = await saveCustomerFile3Api({ ...this.form, id: this.id })
        // console.log(res)
        if (res.code == 200) {
          this.$emit('next', 4)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
